<div class="row">
	<div class="col-md-12">
		<ol class="breadcrumb">
			<li>
				<a href="#" onclick="toHome()">
					主页
				</a>
			</li>
			<li class="active">
				用户管理
			</li>
		</ol>
	</div>
</div>
<form role="form" class="form-horizontal">
	<div class="row page-cont">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cont-top">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">
						<span class="title-text">用户查询</span>
					</h4>
					<div class="panel-tools">
						<div class="dropdown">
							<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
								<i class="fa fa-cog"></i>
							</a>
							<ul class="dropdown-menu dropdown-light pull-right" role="menu">
								<li>
									<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>折叠</span> </a>
								</li>
								<li>
									<a class="panel-expand" href="#">
										<i class="fa fa-expand"></i> <span>全屏</span>
									</a>
								</li>
							</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">账号</label>
					    <div class="col-sm-4">
					      	<input type="text" class="form-control" id="account" />
					    </div>
				  	</div>
					<div class="form-group panel-cont">
					    <label for="coupon" class="col-sm-2 control-label">邮箱</label>
					    <div class="col-sm-4">
					      	<input type="text" class="form-control" id="email" />
					    </div>
				  	</div>
					<div class="form-group panel-cont">
					    <label for="startDate" class="col-sm-2 control-label">生日</label>
					    <div class="col-sm-4 selectDate">
					   		<input type='text' readonly="readonly" class='form-control selectData' id='birthday' name='date' value='' />
					   		<i class="fa fa-calendar"></i>  
					    </div>
				  	</div>
				  	<div class="form-group">
				  		<div class="col-sm-5 col-sm-offset-5">
				  			<button type="button" class="btn btn-primary" id="check-btn">查询</button>
				  			<button type="reset" class="btn reset-btn">重置</button>
				  		</div>
				  	</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cont-bottom">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">
						<span class="title-text">用户列表</span>
					</h4>
					<div class="panel-tools">
						<div class="dropdown">
							<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
								<i class="fa fa-cog"></i>
							</a>
							<ul class="dropdown-menu dropdown-light pull-right" role="menu">
								<li>
									<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>折叠</span> </a>
								</li>
								<li>
									<a class="panel-expand" href="#">
										<i class="fa fa-expand"></i> <span>全屏</span>
									</a>
								</li>
							</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="row table-btn">
					<div class="col-sm-12">
						<button type="button" class="btn btn-success add-btn">添加用户&nbsp;<i class="fa fa-plus"></i></button>
						<button type="button" class="btn btn-red delete-user">删除&nbsp;<i class="fa fa-trash-o"></i></button>
					</div>
				</div>
				<div class="panel-body table-body">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th class="hidden-xs">
									<input type="checkbox" name="checkAll" />
								</th>
								<th class="hidden-xs">部门</th>
								<th class="hidden-xs">账号</th>
								<th class="hidden-xs">昵称</th>
								<th class="hidden-xs">邮箱</th>
								<th class="hidden-xs">手机</th>
								<th class="hidden-xs">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr align="center">
								<td>
									<input type="checkbox" data-id="0" class="user-id" value="0" name="checkId" />
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td>
									<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>
									<button type="button" class="btn btn-green edit-btn">编辑&nbsp;<i class="fa fa-edit"></i></button>
									<button type="button" class="btn btn-purple group-btn" data-target=".user-group" data-toggle="modal">分组&nbsp;<i class="fa fa-leaf"></i></button>
									<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>
								</td>
							</tr>
							<tr align="center">
								<td>
									<input type="checkbox" data-id="1" class="user-id" value="0" name="checkId" />
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td>
									<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>
									<button type="button" class="btn btn-green edit-btn">编辑&nbsp;<i class="fa fa-edit"></i></button>
									<button type="button" class="btn btn-purple group-btn" data-target=".user-group" data-toggle="modal">分组&nbsp;<i class="fa fa-leaf"></i></button>
									<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>
								</td>
							</tr>							
							<tr align="center">
								<td>
									<input type="checkbox" data-id="2" class="user-id" value="0" name="checkId" />
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td>
									<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>
									<button type="button" class="btn btn-green edit-btn">编辑&nbsp;<i class="fa fa-edit"></i></button>
									<button type="button" class="btn btn-purple group-btn" data-target=".user-group" data-toggle="modal">分组&nbsp;<i class="fa fa-leaf"></i></button>
									<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>
								</td>
							</tr>														
						</tbody>
					</table>
					<div class="M-box3 page-style"></div>
				</div>
			</div>
		</div>
	</div>
</form>

<!-- 用户分组弹框 -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal user-group fade" id="userGroup">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">
					×
				</button>
				<h3 id="myModalLabel" class="modal-title">用户分组选择</h3>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-sm-6">
						<div class="panel-heading">
							<h4 class="panel-title">
								<span class="title-text">未选择</span>
							</h4>							
						</div>
						<div class="panel-body">
							<select class="col-sm-12" size="5">
								<option value=""></option>
							</select>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="panel-heading">
							<h4 class="panel-title">
								<span class="title-text">已选择</span>
							</h4>								
						</div>
						<div class="panel-body">
							<select class="col-sm-12" size="5">
								<option value="">基础权限管理</option>
								<option value="">奖品管理</option>
								<option value="">活动管理</option>
								<option value="">积分管理</option>
								<option value="">菜单录入管理</option>
								<option value="">订单管理</option>
								<option value="">超级管理员</option>
							</select>							
						</div>
					</div>					
				</div>
			</div>
			<div class="modal-footer">
				<button data-dismiss="modal" class="btn btn-default" type="button">
					关闭
				</button>
				<!-- <button class="btn btn-primary" id="edit-pwd" type="button">
					确认
				</button> -->
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>





<script>

	/**********************************************变量**********************************************/
	var pageNo = 1;     // 第几页
	var pageSize = 10;  // 每页几条
	var totalPage;      // 总页数
	var account;        // 账号
	var email;          // 邮箱
	var birthday;       // 生日
	var username;       // 用户姓名
	var cehckNum = [];  // 选中数组
	var token = MXCookie.get("token",token);  // 登陆token   

	/**********************************************事件**********************************************/
	datePicker($("#birthday"));  // 生日
	username = GetQueryString("username");
	
	// checkbox选择
	// checkFun();
	

//	// 全选/全不选
//	$("input[name='checkAll'").click(function(){
//		if($(this).is(":checked")){
//			$("input[name='checkId']").prop("checked", true);
//			cehckNum.push(1);
//			cehckNum.length = $("tbody tr").length;
//			$(".delete-user").attr("data-del",cehckNum.length);
//		}else{
//			$("input[name='checkId']").prop("checked", false);
//			cehckNum.splice(0,$("tbody tr").length);
//			$(".delete-user").removeAttr("data-del");
//		}
//	});
//	// 反选
//	for(var i = 0; i < $("input[name='checkId']").length; i ++){
//		if($("input[name='checkId']").eq(i).is(":checked")){
//			$(this).attr("data-check","1");
//		}else{
//			$(this).attr("data-check","0");
//		}
//		$("input[name='checkId']").eq(i).click(function(){
//			if($(this).is(":checked")){
//				cehckNum.push(1);
//				console.log($(this).attr("data-id"));
//				$(this).parent().parent().attr("data-id",$(this).attr("data-id"));
//			}else{
//				cehckNum.splice(0,1);
//				$(this).parent().parent().removeAttr("data-id");
//			}
//			if(cehckNum.length == $("tbody tr").length){
//				$("input[name='checkAll'").prop("checked", true);
//			}else{
//				$("input[name='checkAll'").prop("checked", false);
//			}
//			if(cehckNum.length != "0"){
//				$(".delete-user").attr("data-del",cehckNum.length);
//			}else{
//				$(".delete-user").removeAttr("data-del");
//			}
//		});
//	}
	
	var selectedUserId = []
	$(".user-id").click(function () { // 单个用户选择
	  var userId = $(this).attr("data-id");
	  var userIdIndexOf = selectedUserId.indexOf(userId)
	  if ($(this).is(":checked") && userIdIndexOf === -1) {
	    selectedUserId.push(userId);
	  } else if(!$(this).is(":checked") && userIdIndexOf !== -1) {
	    selectedUserId.splice(userIdIndexOf, 1);
	  }
	  if ($("tbody tr").length === selectedUserId.length) {
	    $("thead input[name='checkAll']").prop("checked", true);
	  } else {
	    $("thead input[name='checkAll']").prop("checked", false);
	  }
	  console.log(selectedUserId)
	})
	
	$("thead input[name='checkAll']").click(function () { // 用户全选与取消全选
	  selectedUserId = []; // 先清空所有已经选择的用户，然后循环添加所有的用户
	  if ($(this).is(":checked")) {
	    for (var i = 0; i < $("tbody tr td input").length; i++) {
	    	selectedUserId.push($("tbody tr td input").eq(i).attr("data-id"))
	    }
	  }
	  $("tbody tr td input").prop("checked", $(this).is(":checked")) // 所有单行数据的复选框与全选的状态一致
	  console.log(selectedUserId)
	})
	
  $(".delete-user").click(function(){
    $("tbody tr td input:checked").parent().parent().remove();
    $("thead input[name='checkAll']").prop("checked", false); // 清空全选复选框
    selectedUserId = []; // 删除完以后，清空所有已经选择的用户
  })

	// 删除
//	$(".delete-user").click(function(){
//		if($(this).attr("data-del")){
//			debugger
//			for(var i = 0; i < $("input[name='checkId']").length; i ++){
//				if($("input[name='checkId']").eq(i).is(":checked")){
//					$("input[name='checkId']").eq(i).parent().parent().remove();
//				}
//			}
//		}else{
//			tips("请选择要删除的用户");
//		}
//	});		


	// 查询
	$("#check-btn").click(function(){
		name = $("#couponName").val();
		account = $("#account").val();
		email = $("#email").val();
		birthday = $("#birthday").val();
		// getList(name,cardType,startTime,endTime,pageNo);
	});

	// 添加用户
	toOperat($(".add-btn"),"view/userManage/add-user.html");

	// 查看
	toOperat($(".check-btn"),"view/userManage/user-view.html");

	// 编辑
	toOperat($(".edit-btn"),"view/userManage/edit-user.html");

	// 用户分组选择
	











	
	/**********************************************函数**********************************************/
	// 获取通兑卡列表
	function getList(name,cardType,startTime,endTime) {
		$("tbody").html("");
		$.ajax({
			url: localStorage.grobalUrl + "/discount/discountList",
			type: "post",
			async:false,
			data:{
				username: username,
				token: token,  
				pageNo: pageNo,   
				pageCount: pageSize
			},
			success: function(data){
				console.log(data);
				var str =  '<tr align="center">'+
								'<td class="card-id">2343</td>'+
								'<td class="card-name">3423</td>'+
								'<td class="card-intro"></td>'+
								'<td class="max-price"></td>'+
								'<td class="start-time"></td>'+
								'<td class="end-time"></td>'+
								'<td>'+
									'<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>'+
									'<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>'+
									'<button type="button" class="btn btn-dark-yellow coupon-btn">生成优惠券&nbsp;<i class="fa fa-caret-square-o-down"></i></button>'+
									'<button type="button" class="btn btn-dark-yellow export-btn">导出&nbsp;<i class="fa fa-arrow-circle-down"></i></button>'+
								'</td>'+
							'</tr>';
				if(data.errCode == "00005"){
					tips("请重新登陆");
					setTimeout(function(){
						window.location.href = "login_login.html";
					},500);
				}
				if (data.couponPage){
				  	var dataVal = data.couponPage.list;
			        totalPage = data.couponPage.totalPage;
			        for(var i = 0; i < dataVal.length; i ++){
			            var cardVal = dataVal[i];
			            $("tbody").append(str);
			            $(".card-id").eq(i).text(cardVal.id);
			            $(".card-name").eq(i).text(cardVal.name);
			            $(".card-intro").eq(i).text(cardVal.introduction);
			            $(".max-price").eq(i).text(cardVal.maximum_price);
			            $(".start-time").eq(i).text(cardVal.begin_date);
			            $(".end-time").eq(i).text(cardVal.end_date);
			        }
			  
			        // 删除按钮
			        $(".delete-btn").click(function(){
			            var index = $(".delete-btn").index(this);
			            var cardId = $(".card-id").eq(index).text();
			            // deleteList(cardId,index);
			        });
			  
			  
			        // 查看
			        $(".check-btn").click(function(){
			            var index = $(".check-btn").index(this);
			            cardId = $(".card-id").eq(index).text();
			            $(".pageAdd").attr("data-id",cardId);
			            url = "view/exchangeCard/card-view.html";
			            getPage(url);                             
			        });
			     
				}else{
				  $("tbody").append("<tr><td align='center' colspan='11'>暂无数据</td></tr>");
				}
					
			},
			error: function(error){
				console.log(error);
			}
		});	
	}
	 // getList();

	// 分页
	// pageSetGet();
			

	// 删除
	function deleteList(cardId,index){
		$.ajax({
			url: localStorage.grobalUrl + "",
			type:"post",
			data: {
				username: username,
				token: token,				
				couponId: cardId
			},
			success: function(data){
				console.log(data);
				if(data.errCode == "00000"){
					$(".delete-btn").eq(index).parent().parent().remove();
				}else if(data.errCode == "00005"){
					tips("请重新登陆");
					setTimeout(function(){
						window.location.href = "login_login.html";
					},500);					
				}else{
					tips("删除失败");
				}
			},
			error: function(error){
				console.log(error);
			}
		});
	}
	
</script>
